<template>
  <div class="ebook-slide-contents">
    <div class="slide-contents-search-wrapper">
      <div class="slide-contents-search-input-wrapper">
        <div class="slide-contents-search-icon">
          <span class="icon-search"></span>
        </div>
        <input
          v-model="searchText"
          :placeholder="$t('book.searchHint')"
          type="text"
          @click="showSearchPage"
          @keyup.enter.exact="search()"
          class="slide-contents-search-input"
        >
      </div>
      <div
        v-if="searchVisible"
        class="slide-contents-search-cancel"
        @click="hideSearchPage()"
      >{{$t('book.cancel')}}</div>
    </div>
    <div
      class="slide-contents-book-wrapper"
      v-show="!searchVisible"
    >
      <div class="slide-contents-book-img-wrapper">
        <img
          :src="cover"
          class="slide-contents-book-img"
          srcset=""
        >
      </div>
      <div class="slide-contents-book-info-wrapper">
        <div class="slide-contents-book-title"> 
          <span class="slide-contents-book-title-text">{{metadata.title}} </span>
           </div>
        <div class="slide-contents-book-anthor">
          <span class="slide-contents-book-author-text">{{metadata.creator}}</span>

       
           </div>

      </div>
      <div class="slide-contents-book-progress-wrapper">

        <div class="slide-contents-book-progress">
          <span class="progress">{{progress + '%'}}</span>
          <span class="progress-text">{{$t('book.haveRead2')}}</span>
        </div>
        <div class="slide-contents-book-time">
          {{getReadTimeText()}}
        </div>
      </div>
    </div>
    <scroll
      class="slide-contents-list"
      :top="156"
      :bottom="48"
      ref="scroll"
      v-show="!searchVisible"        
    >
        <div
          class="slide-contents-item"
          v-for="(item, index) in navigation"
          :key="index"
          :class="{'selected':section === index}"
          @click="displayContent(item.href)"
        >
          <span
            class="slide-contents-item-label"
            :style="contentItemStyle(item)"
          >{{item.label}}</span>
          <span class="slide-contents-item-page">
            {{item.page}}
          </span>
        </div>
    </scroll>
    <scroll class="slide-search-list" 
    :top="66" 
    :bottom="48"
    v-show="searchVisible">
      <div class="slide-search-item" 
      v-for="(item, index) in searchList" 
      v-html="item.excerpt" 
      :key="index"
      @click="displayContent(item.cfi,true)"
      >

      </div>
    </scroll>
  </div>
</template>
<script>
import { ebookMixin } from '../../utils/mixin';
import Scroll from './../common/Scroll'
import { px2rem } from './../../utils/utils'
export default {
  mixins: [ebookMixin],
  components: {
    Scroll
  },
  data() {
    return {
      searchVisible: false,
      searchText : '',
      searchList:null


    }
  },
  methods: {
    search(){
      if(this.searchText && this.searchText.length>0){
        this.doSearch(this.searchText).then((list) => {
          this.searchList = list
          this.searchList.map(item=>item.excerpt = item.excerpt.replace(this.searchText,`<span class="content-search-text">${this.searchText}</span>`)
          )
        })
      }
    },
    displayContent(target,highlight = false){
      this.display(target,() => {
        this.hideTitleAndMenu()
        if(highlight) 
          this.currentBook.rendition.annotations.highlight(target)
      })
    },
    doSearch(q) {
      return Promise.all(
        this.currentBook.spine.spineItems.map(item =>
          item.load(this.currentBook.load.bind(this.currentBook))
            .then(item.find.bind(item, q))
            .finally(item.unload.bind(item)))
      ).then(results => Promise.resolve([].concat.apply([], results))); // 使用apply+空数组实现降维操作
    },
   
    showSearchPage() {
      this.searchVisible = true;
    },
    hideSearchPage() {
      this.searchVisible = false;
      this.searchText = '',
      this.searchList=null
    },
    contentItemStyle(item) {
      return {
        marginLeft: `${px2rem(item.level * 15)}rem`
      }
    }
  },

}
</script>
<style lang="scss" scoped>
@import "@styles/global.scss";

.ebook-slide-contents {
  width: 100%;
  // 去除 顶部空白
  font-size: 0;
  .slide-contents-search-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    height: px2rem(36);
    margin: px2rem(20) 0 px2rem(10) 0;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-contents-search-input-wrapper {
      flex: 1;
      @include center;
      .slide-contents-search-icon {
        flex: 0 0 px2rem(28);
        font-size: px2rem(12);
        @include center;
      }
      .slide-contents-search-input {
        flex: 1;
        height: 100%;
        height: px2rem(32);
        font-size: px2rem(14);
        background: transparent;
        border: none;
        &:focus {
          outline: none;
        }
      }
    }
    .slide-contents-search-cancel {
      flex: 0 0 px2rem(50);
      font-size: px2rem(14);
      @include right;
    }
  }
  .slide-contents-book-wrapper {
    width: 100%;
    display: flex;
    height: px2rem(90);
    padding: px2rem(10) px2rem(15) px2rem(20) px2rem(15);
    box-sizing: border-box;
    .slide-contents-book-img-wrapper {
      flex: 0 0 px2rem(45);
      .slide-contents-book-img {
        width: px2rem(45);
        height: px2rem(60);
      }
    }
    .slide-contents-book-info-wrapper {
      flex: 1;
      padding: 0 px2rem(10);
      box-sizing: border-box;
      .slide-contents-book-title {
        /* 屏幕宽度* 左侧占据 - 左右边距 - 标题边距 - 图片 - 右侧进度  */
        /* width: px2rem(153.75); */
        font-size: px2rem(14);
        line-height: px2rem(16);
          @include left;
        .slide-contents-book-title-text{
        @include ellipsis2(3);
        }
      }
      .slide-contents-book-anthor {
        font-size: px2rem(12);
        line-height: px2rem(14);
        margin-top:px2rem(5);
        /* width: px2rem(153.75); */
        @include left;
        .slide-contents-book-author-text{
        @include ellipsis2(1);

        }
      }
    }
    .slide-contents-book-progress-wrapper {
      flex: 0 0 px2rem(70);
      .slide-contents-book-progress {
        .progress {
          font-size: px2rem(14);
        }
        .progress-text {
          font-size: px2rem(12);
        }
      }
      .slide-contents-book-time {
        font-size: px2rem(12);
        margin-top: px2rem(5);
      }
    }
  }
  .slide-contents-list {
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-contents-item {
      display: flex;
      box-sizing: border-box;
      padding: px2rem(20) 0;
      &.selected {
        font-weight: 600;
      }
      .slide-contents-item-label {
        flex: 1;
        font-size: px2rem(14);
        line-height: px2rem(16);
        @include ellipsis;
      }
      .slide-contents-item-page{
        flex: 0 0 px2rem(30);
        font-size: px2rem(10);
        @include right;
      }

    }
  }
  .slide-search-list{
    width: 100%;
    padding: 0 px2rem(15);
    box-sizing: border-box;
    .slide-search-item{
      font-size: px2rem(14);
      line-height: px2rem(16);
      padding: px2rem(20) 0;
      box-sizing: border-box;
    }
  }
}
</style>
